import React, { useState } from 'react';
import './index.css';

const Index: React.FC = () => {
    const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // 初始值设为 -1，表示没有悬停
    const [lastHoveredIndex, setLastHoveredIndex] = useState<number>(-1); // 记录最后悬停的盒子索引

    const boxContents = [
        { text: "内容 1" },
        { text: "内容 2" },
        { text: "内容 3" },
        { text: "内容 4" },
        { text: "内容 5" },
        { text: "内容 6" },
    ];

    const boxhou = [
        { text: "内容 1" },
        { text: "内容 2" },
        { text: "内容 3" },
        { text: "内容 4" },
        { text: "内容 5" }, 
        { text: "内容 6" },
    ];
    const handleMouseEnter = (index: number) => {
        setHoveredIndex(index);
        setLastHoveredIndex(index); // 更新最后悬停的索引
    };

    const handleMouseLeave = () => {
        if (lastHoveredIndex !== -1) {
            setHoveredIndex(lastHoveredIndex); // 保持最后悬停的盒子
        }
    };

    return (
        <div>
            <div className="x-top">
                <p>一站式服务<br />搭建企业视觉内容新基建</p>
            </div>
            <div className="container">
                {boxContents.map((content, index) => (
                    <div
                        key={index}
                        className={`box ${hoveredIndex === index ? 'hovered' : ''}`}
                        onMouseEnter={() => handleMouseEnter(index)}
                        onMouseLeave={handleMouseLeave}
                    >
                        <h1 className={hoveredIndex === index ? 'slide-up' : ''}>
                            {hoveredIndex === index ? content.text : "boxhou.text" }
                        </h1>

                    </div>
                ))}
            </div>
        </div>
    );
};

export default Index;
